<template>
  <div>
    <el-row :gutter="8">
      <el-col :span="12">
        <el-card header="油罐压力">
          <scEcharts height="400px" :option="logsChartOption1"></scEcharts>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card header="进气口压力">
          <scEcharts height="400px" :option="logsChartOption2"></scEcharts>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card header="加油枪实时数据">
          <el-row>
            <template v-for="(data, index) in jyqData" :key="index">
              <div class="infobox">
                <div class="imgbox">
                  <img
                    src="/static/img/icon-gun.svg"
                    style="width: 80%; height: 80%"
                  />
                </div>
                <div style="margin-left: 10px; flex: 1 1 0%">
                  <h4>{{ data.jyzmc }}-{{ data.sbmc }}</h4>
                  <p>{{ data.curtime }}</p>
                  <span class="timeout green">
                    1.1
                    <span style="color: gray"> </span
                  ></span>
                  <span class="timeout grey" style="margin-left: 6px"
                    >{{ data.ryl }}L燃油</span
                  >
                  <span class="timeout blue" style="margin-left: 6px"
                    >加油{{ data.jycs }}次</span
                  >
                </div>
              </div>
            </template>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import scEcharts from "@/components/scEcharts";
import { getLastGuanYa } from "@/api/yqhs/zxsj.js";
import { getLastJqkyl } from "@/api/yqhs/scjcsj.js";
import { getRtInfo } from "@/api/yqhs/qyb.js";

import { watch } from "vue";
import { computed } from "vue";

const props = defineProps({
  id: {
    type: String,
    default: "",
  },
});
const { id } = toRefs(props);

const guanya = ref(0);
const jqkyl = ref(0);

const jyqData = ref([
  { name: "加油站#1", value: "1.1", sum: "39.5", num: "25" },
]);

const logsChartOption1 = ref({
  series: [
    {
      type: "gauge",
      min: 0,
      max: 1000,
      axisLine: {
        lineStyle: {
          width: 20,
          color: [
            [0.3, "#67e0e3"],
            [0.7, "#37a2da"],
            [1, "#fd666d"],
          ],
        },
      },
      pointer: {
        itemStyle: {
          color: "auto",
        },
      },
      axisTick: {
        distance: -10,
        length: 8,
        lineStyle: {
          color: "#fff",
          width: 2,
        },
      },
      splitLine: {
        distance: -20,
        length: 10,
        lineStyle: {
          color: "#fff",
          width: 4,
        },
      },
      axisLabel: {
        color: "inherit",
        distance: 40,
        fontSize: 20,
      },
      detail: {
        valueAnimation: true,
        formatter: "{value} Pa",
        color: "inherit",
      },
      data: [
        {
          value: guanya.value,
        },
      ],
    },
  ],
});
const logsChartOption2 = ref({
  series: [
    {
      type: "gauge",
      min: 0,
      max: 1000,
      axisLine: {
        lineStyle: {
          width: 20,
          color: [
            [0.3, "#67e0e3"],
            [0.7, "#37a2da"],
            [1, "#fd666d"],
          ],
        },
      },
      pointer: {
        itemStyle: {
          color: "auto",
        },
      },
      axisTick: {
        distance: -10,
        length: 8,
        lineStyle: {
          color: "#fff",
          width: 2,
        },
      },
      splitLine: {
        distance: -20,
        length: 10,
        lineStyle: {
          color: "#fff",
          width: 4,
        },
      },
      axisLabel: {
        color: "inherit",
        distance: 40,
        fontSize: 20,
      },
      detail: {
        valueAnimation: true,
        formatter: "{value} Pa",
        color: "inherit",
      },
      data: [
        {
          value: jqkyl.value,
        },
      ],
    },
  ],
});

watch(
  id,
  (newValue) => {
    if (newValue) {
      getLastGuanYa(newValue).then((res) => {
        guanya.value = Number(res.data);
      });
      getLastJqkyl(newValue).then((res) => {
        jqkyl.value = res.data;
      });
      getRtInfo(newValue).then((res) => {
        jyqData.value = res.data;
      });
    }
  },
  { immediate: true }
);
onMounted(() => {});
</script>
<style scoped>
.infobox {
  padding: 20px;
  border: 1px solid #e8edf2;
  background: #f9fbfd;
  border-radius: 10px;
  display: flex;
}
.infobox h4 {
  margin: 0;
  text-align: justify;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.infobox p {
  margin: 5px 0 10px;
  color: #666;
}
.grayInfo {
  background: #eee;
}

.imgbox {
  background: #e8ecf0;
  width: 80px;
  height: 80px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.infobox .timeout {
  font-size: 14px;
  font-weight: 700;
  border-radius: 3px;
  padding: 4px 15px;
  text-align: center;
}

.infobox .red {
  background: #fae2d8;
  color: #ff804e;
}
.infobox .grey {
  background: #e8ecf0;
  color: #a9acae;
}
.infobox .green {
  background: #cdf2e8;
  color: #03bf8a;
}
.infobox .yellow {
  background: #fffbb9;
  color: #ff9c00;
}
.infobox .blue {
  background: #e8ecf0;
  color: #409eff;
}
</style>
